<?php use_javascript('/project_css_js/js/jquery.fancybox-1.3.1.pack.js') ?>
<?php use_javascript('/project_css_js/js/jquery.mousewheel-3.0.2.pack.js') ?>

<div class="tabsboxleft">
	<div class="topimg">
		<a id="bigpic" rel="example_group" href="<?php echo @myPicture::getInstance($pictures[0]['file'])->url() ?>">
			<img src="<?php echo @myPicture::getInstance($pictures[0]['file'])->thumbnail(267, 218)->url() ?>" width="267" height="218" alt=""/>
		</a>
	</div>
	<div class="zoom">
		<a href="#" id="zoom_button"><p><?php echo __('suurenda') ?></p></a>
	</div>
	<div class="tabsgallery">
		<ul>
			<?php for($i = 1; $i < count($pictures) && $i <= 3; ++$i): ?>
			    <li class="<?php echo ($i==count($pictures) || $i==3) ? 'last' : '' ?>">
					<a rel="example_group" href="<?php echo @myPicture::getInstance($pictures[$i]['file'])->url() ?>"><img alt="" src="<?php echo @myPicture::getInstance($pictures[$i]['file'])->thumbnail(86,70)->url() ?>" width="86" height="70"/></a>
				</li>
			<?php endfor; ?>
			<div class="clear"></div>
		</ul>
	</div>
	<?php if(isset($product['video_link']) && !empty($product['video_link'])): ?>
	<div class="player">
		<?php echo $product['video_link'] ?>
	</div>
	<?php endif; ?>
</div>

<script type="text/javascript">
	$(document).ready(function() {

		$('#zoom_button').click(function(e){
			e.preventDefault();
			$('#bigpic').trigger('click');
			return false;
		});

		$("a[rel=example_group]").fancybox({
			'transitionIn'		: 'none',
			'transitionOut'		: 'none',
			'titlePosition' 	: 'over',
			'overlayColor'		: '#000',
			'showCloseButton'   : 'true',
			'showNavArrows'     : 'true',
			'overlayOpacity'	: 0.8,
			'overlayShow'       : 'true'
		});
	});
</script>